import React from 'react'
import Taro from '@tarojs/taro'
import {Image, View, Text} from '@tarojs/components'
import './index.scss'

export default function Vip() {
  let capsule = {}
  if(process.env.TARO_ENV === 'weapp') capsule = Taro.getMenuButtonBoundingClientRect()
  return (
    <View className='vip'>
      <Image src={require('@/images/vip/vip-bg.png')} className='vip-bg' mode='aspectFill' />
      <View className='vip-nav-bar' style={{paddingTop:capsule.top+'PX'}}>上影VIP会员中心</View>
      <View className="vip-header">
        <View className="header-box">
          <View className="box-info">
            <View className="h2">上影SFC VIP至尊卡</View>
            <Text>开通立项特权</Text>
          </View>
          <View className="box-price">
            <View className="price-span">预计可省</View>
            <View className="price box-flex"><Text style={{fontSize:'24px',fontWeight:'600'}}>1888</Text> 元/年</View>
          </View>
        </View>
      </View>

      <View className="vip-main">
        <Image className='main-bg' src={require('@/images/vip/main-top.png')} mode='widthFix' />
        <View className="main-button">立即开通 188元/年</View>
        <View className="main-list">
          <View className="list-item">
            <Image src={require('@/images/vip/vip.svg')} className="item-icon"></Image>
            <View className='p'>会员价</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/cola.svg')} className="item-icon"></Image>
            <View className='p'>可乐畅饮</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/birthday.svg')} className="item-icon"></Image>
            <View className='p'>生日特权</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/select.svg')} className="item-icon"></Image>
            <View className='p'>优选座位</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/posi.svg')} className="item-icon"></Image>
            <View className='p'>会员日惊喜</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/face.svg')} className="item-icon"></Image>
            <View className='p'>明星见面会</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/watch.svg')} className="item-icon"></Image>
            <View className='p'>超前观影</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/music.svg')} className="item-icon"></Image>
            <View className='p'>影视周边</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/talk.svg')} className="item-icon"></Image>
            <View className='p'>异业特权</View>
          </View>
          <View className="list-item">
            <Image src={require('@/images/vip/tui.svg')} className="item-icon"></Image>
            <View className='p'>退改签</View>
          </View>
        </View>
        <View className="main-gift">
          <View className="gift-title">
            <View className="h2">入会礼遇</View>
            <View className="h2-span">详情 <Text className='at-icon at-icon-chevron-right'></Text></View>
          </View>
          <View className="gift-list">
            <View className="list-item">
              <View className="item-card">
                <View className='price'><Text style={{fontSize:'12px'}}>￥</Text>100</View>
                电影卡
              </View>
              <View className="item-time"><Text className='at-icon at-icon-alert-circle'></Text>有效期30天</View>
            </View>
          </View>
          <View className="gift-title">
            <View className="h2">入会礼遇</View>
            <View className="h2-span">详情 <Text className='at-icon at-icon-chevron-right'></Text></View>
          </View>
          <View className="gift-goods not-bar">
            <View className="goods-item">
              <Image className='item-img' mode='aspectFill' src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'></Image>
              <View className="h2">畅饮杯</View>
            </View>
          </View>
        </View>

        <View className="main-privilege">
          <View className="title">服务特权</View>
          <View className="privilege-list">
            <View className="list-item">
              <View className="item-header">
                <View className="h2">全年畅饮</View>
                <View className="h2-span">详情 <Text className='at-icon at-icon-chevron-right'></Text></View>
              </View>
              <View className="box-flex">
                <Image className='item-img' mode='aspectFill' src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'></Image>
                <View className="item-info">
                  <View className="h2">免费饮料兑换券</View>
                  <Text>每天可领取1张，领取当天有效</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}
